<!--模块：政策库 - 政策发布 - 修改-->
<template>
  <div class="policy-publish" style="overflow:scroll;height:100%">
    <AppMainContent style="width:100%;margin-top:0px;margin-left:0px;">
      <el-row style="background-color:#fff">
        <el-col :span="2" style="float:right;margin-bottom:10px;margin-top:8px">
          <el-button type="primary" @click="fabu()" style="width:100px">
            发布
          </el-button>
        </el-col>
        <el-col :span="2" style="float:right;margin-bottom:10px;margin-top:8px">
          <el-button type="primary" @click="edit()" style="width:100px">
            修改
          </el-button>
        </el-col>
      </el-row>
    </AppMainContent>

    <AppMainContent>
      <!-- 卡片头部 -->
      <el-card style="height:650px">
        <CardFormTitle title="政策信息" style="margin-top:-10px" />
        <!-- 表单内容 -->
        <CardFormContent style="width:1000px;height:420px;">
          <div style="width:1400px">
            <div class="addNav">
              <span>政策标题</span>
              <br />
              <el-input
                v-model="formInline.title"
                style="width:460px"
              ></el-input>
            </div>
            <div class="addNav">
              <span>政策级别</span>
              <br />
              <el-select v-model="formInline.level.value">
                <el-option
                  v-for="level in dataOptions[0]"
                  :key="level.value"
                  :label="level.desc"
                  :value="level.value"
                ></el-option>
              </el-select>
            </div>

            <div class="addNav">
              <span style="margin-right:230px">政策类型</span>
              <br />
              <el-select v-model="formInline.type.value">
                <el-option
                  v-for="type in dataOptions[1]"
                  :key="type.value"
                  :label="type.desc"
                  :value="type.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="addNavSecond">
            <span>政策来源</span>
            <br />
            <el-input
              v-model="formInline.source"
              style="width:210px"
            ></el-input>
          </div>
          <div class="addNavThird">
            <span style="margin-left:35px">政策发布时间</span>
            <br />
            <el-date-picker
              v-model="formInline.awardTime"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </div>

          <div class="died">
            <span>新增人</span>
            <br />
            <el-input
              v-model="formInline.createUserName"
              :disabled="true"
              style="width:215px"
            ></el-input>
          </div>

          <div class="diedtwo">
            <span>新增时间</span>
            <br />
            <el-input
              :value="formInline.publishTime"
              :disabled="true"
              style="width:215px"
            ></el-input>
          </div>

          <div class="vueEditor">
            <div
              style="font-size:16px;font-weight:bold;margin-bottom:13px;display:none"
            >
              富文本编辑器内容：{{ formInline.info }}
            </div>
            <VueQuillEditor
              :content.sync="formInline.info"
              :business-type="1"
            />
          </div>
        </CardFormContent>

        <div class="policyInfo" :style="style">
          <!-- 审核信息 -->
          <CardFormTitle title="审核信息" style="margin-top:-29px" />
          <div style="width:600px">
            <div class="comefirst">
              <span>审核人</span>
              <br />
              <el-input
                v-model="formInline.examineUserName"
                style="width:200px"
                :disabled="true"
              ></el-input>
            </div>

            <div class="comefirst">
              <span>审核时间</span>
              <br />
              <el-date-picker
                type="date"
                v-model="formInline.examineTime"
                style="width: 200px"
                :disabled="true"
              ></el-date-picker>
            </div>

            <div class="shenhebeizhu">
              <span style="font-weight: bold;font-size: 15px;">
                审核备注
              </span>
              <el-input
                type="textarea"
                v-model="formInline.examineOpinion"
                show-word-limit
                style="width: 105%;"
                :disabled="true"
              />
            </div>
          </div>
        </div>
      </el-card>
    </AppMainContent>
  </div>
</template>

<script>
//引入下拉框信息  引入 更新政策接口信息
import {
  policyLevelInfo,
  updatePolicyInfo,
  getPolicyInfoData,
} from '@/api/policy/index'
export default {
  name: 'PolicyPublishAdd',
  data() {
    return {
      formInline: {
        id: '',
        level: { value: '' },
        type: { value: '' },
        examineResult: '',
      },
      dataOptions: [],
      updatePolicy: {
        id: '',
        title: '',
        level: '',
        type: '',
        source: '',
        awardTime: '',
        info: '',
        examineResult: '',
      },
      style: 'display:none',
    }
  },
  methods: {
    edit() {
      let _this = this
      _this.updatePolicy.id = this.formInline.id
      _this.updatePolicy.title = this.formInline.title
      _this.updatePolicy.level = this.formInline.level.value
      _this.updatePolicy.type = this.formInline.type.value
      _this.updatePolicy.source = this.formInline.source
      _this.updatePolicy.awardTime = this.formInline.awardTime
      _this.updatePolicy.info = this.formInline.info
      this.$confirm('此政策信息将被修改, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return updatePolicyInfo(_this.updatePolicy)
        })
        .then(() => {
          window.location.href = '/policy/publish'
          this.msgSuccess('修改成功')
        })
        .catch(() => {
          this.$message('已取消修改')
        })
    },
    fabu() {
      let _this = this
      _this.updatePolicy.id = this.formInline.id
      _this.updatePolicy.title = this.formInline.title
      _this.updatePolicy.level = this.formInline.level.value
      _this.updatePolicy.type = this.formInline.type.value
      _this.updatePolicy.source = this.formInline.source
      _this.updatePolicy.awardTime = this.formInline.awardTime
      _this.updatePolicy.info = this.formInline.info
      _this.updatePolicy.examineResult = 1
      this.$confirm('此政策信息 将会被 发布, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return updatePolicyInfo(_this.updatePolicy)
        })
        .then(() => {
          window.location.href = '/policy/publish'
          this.msgSuccess('发布成功')
        })
        .catch(() => {
          this.$message('已取消发布')
        })
    },
    //* 获取级别下拉框信息
    getLevelOptions() {
      policyLevelInfo()
        .then((response) => {
          if (response.code === 200) {
            this.dataOptions = response.data
          }
        })
        .catch(function(error) {
          this.$message.error('系统错误')
        })
    },
  },
  mounted() {
    this.getLevelOptions()
    this.formInline.id = this.$route.query.id
    getPolicyInfoData(this.formInline.id).then((response) => {
      if (response.data != null && response.code === 200) {
        this.formInline = response.data
        if (
          response.data.examineUserName != '' &&
          response.data.examineTime != null
        ) {
          this.style = 'display:block'
        }
      } else {
        alert('数据出问题了')
      }
    })
  },
}
</script>

<style lang="scss"  scoped>
.addNav {
  float: left;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: -17px;
}

.addNav > span {
  margin-bottom: -10px;
  display: block;
  font-weight: bold;
  font-size: 15px;
}
.addNavSecond {
  float: left;
  margin-left: 20px;
  margin-right: 10px;
  margin-top: 15px;
}

.addNavSecond > span {
  margin-bottom: -10px;
  display: block;
  font-weight: bold;
  font-size: 15px;
}

.addNavThird {
  float: left;
  margin-left: 16px;
  margin-right: 10px;
  margin-top: 15px;
}

.addNavThird > span {
  margin-bottom: -10px;
  margin-left: 19px;
  display: block;
  font-weight: bold;
  font-size: 15px;
}

.vueEditor {
  float: left;
  margin-top: 20px;
  margin-left: 20px;
}

.comefirst {
  float: left;
  margin-left: 20px;
  margin-right: 20px;
}

.comefirst > span {
  margin-bottom: -10px;
  display: block;
  font-weight: bold;
  font-size: 15px;
}
.shenhebeizhu {
  float: left;
  margin: 20px;
}

.died {
  float: left;
  margin-left: 35px;
  margin-top: 15px;
}

.died > span {
  margin-bottom: -10px;
  display: block;
  font-weight: bold;
  font-size: 15px;
}

.diedtwo {
  float: left;
  margin-left: 45px;
  margin-top: 15px;
}

.diedtwo > span {
  margin-bottom: -10px;
  display: block;
  font-weight: bold;
  font-size: 15px;
}
</style>
